import React, { Component } from 'react'
import { View } from '@tarojs/components'
import * as echarts from '@COMPONENTS/ec-canvas/echarts.min'
import { getEchartOption } from '@UTILS/echartUtil'
import './Echarts.scss'

function initChart(canvas, width, height, option) {
  const chart = echarts.init(canvas, null, {
    width,
    height
  })
  canvas.setChart(chart)

  chart.setOption(option)
  return chart
}

export default class Echarts extends Component {
  state = {
    ec: {
      onInit: initChart
    }
  }

  render() {
    const { style } = this.props
    const option = getEchartOption(this.props)
    return (
      <View className="echarts" style={style}>
        <ec-canvas id="mychart-dom-area" canvas-id="mychart-area" ec={this.state.ec} option={option} />
      </View>
    )
  }
}

